<template>
  <div>
    <p class="title">活动详情</p>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="活动详情" name="1">
          <div class="h">基本信息：</div>
          <div class="msg">
            <div>
              <span>活动编号：</span>
              <span>{{ list.atyId }}</span>
            </div>
            <div>
              <span>活动名称：</span>
              <span>{{ list.atyName }}</span>
            </div>
            <div>
              <span>活动类型：</span>
              <span>{{ list.atyType }}</span>
            </div>
            <div>
              <span>价格类型：</span>
              <span>{{ list.priceType }}</span>
            </div>
            <div>
              <span>活动价格：</span>
              <span>{{ list.atyPrice }}</span>
            </div>
            <div>
              <span>是否用户投票：</span>
              <span>{{ list.whetherVote }}</span>
            </div>
            <div>
              <span>作品投票最大数/人：</span>
              <span>{{ list.worksMaxVote }}</span>
            </div>
            <div>
              <span>用户投票最大数/天：</span>
              <span>{{ list.userMaxVote }}</span>
            </div>

            <div>
              <span>评委人数：</span>
              <span>{{ list.judgesNumber }}</span>
            </div>
            <div>
              <span>上传作品类型：</span>
              <span>{{ list.worksType }}</span>
            </div>
            <div>
              <span>是否设置钻石抵扣：</span>
              <span>{{ list.whetherDeduction }}</span>
            </div>
            <div>
              <span>钻石抵扣数：</span>
              <span>{{ list.deductionNumber }}</span>
            </div>
            <div>
              <span>抵扣金额：</span>
              <span>{{ list.deductionNumber / 100 }}</span>
            </div>
            <div>
              <span>是否填写报名信息：</span>
              <span>{{ list.whetherInfo }}</span>
            </div>
            <div>
              <span>用户字段：</span>
              <span> {{ list.userField }}</span>
            </div>
            <div>
              <span>参与人数：</span>
              <span>{{ list.enrollNumber }}</span>
            </div>
            <div>
              <span>活动进度：</span>
              <span>{{ list.atyState }}</span>
            </div>
            <div>
              <span>报名时间：</span>
              <span>{{
                `${list.enrollStartTime}--${list.enrollEndTime}`
              }}</span>
            </div>
            <div>
              <span>活动时间：</span>
              <span>{{ `${list.atyStartTime}--${list.atyEndTime}` }}</span>
            </div>
            <div>
              <span>状态：</span>
              <span>{{ list.state }}</span>
            </div>
          </div>
          <div class="h">活动封面：</div>
          <div class="img">
            <img :src="list.cover" alt="" />
            <img src="" alt="" />
            <img src="" alt="" />
          </div>
          <!-- 简介 -->
          <div class="h">活动规则</div>
          <p class="row">
            {{ list.intro }}
          </p>
          <div class="h">活动奖励</div>
          <p>活动参赛奖励：</p>
          <p>第一名：</p>
          <p>第二名：</p>
          <div class="h">参与方式</div>
          <p>参与，，，，，，，，，，，，，</p>
        </el-tab-pane>
        <el-tab-pane label="报名信息" name="2">
          <div>
            <div class="price" v-if="list.priceType !== '免费'">
              <h3>活动收入金额总计：{{ statisticsMoney.totalMoney }}</h3>
              <h3>实际收入金额总计：{{ statisticsMoney.incomeMoney }}</h3>
              <h3>钻石抵扣：{{ statisticsMoney.deductionMoney }}</h3>
            </div>
            <div>
            <el-table
              ref="multipleTable"
              :data="tableData2"
              tooltip-effect="dark"
              style="width: 100%"
              border
            >
              <el-table-column label="序号" type="index" align="center">
                <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
              </el-table-column>
              <el-table-column prop="aeId" label="报名编号" align="center">
              </el-table-column>
              <el-table-column
                prop="nickname"
                label="用户昵称"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="fullname"
                label="姓名"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="mobile"
                label="手机号"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="idnumber"
                label="身份证号"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="province"
                label="所在省份"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="city"
                label="所在市"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="region"
                label="所在区"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="aeTime"
                label="报名时间"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="totalPrice"
                label="总金额"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="deduction"
                label="钻石抵扣"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="payPrice"
                label="实际支付"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="atyType"
                label="支付方式"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <Page
              :total="total"
              :pageNumber.sync="pageNumber"
              :pageSize.sync="pageSize"
              @current-change="changeCurrentPage"
              @size-change="handleSizeChange"
            >
            </Page>
          </div>
            
          </div>
        </el-tab-pane>
        <el-tab-pane label="作品管理" name="3">
          <div>
            <span>状态：</span>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

          <div>
              <el-table
                ref="multipleTable"
                :data="tableData3"
                tooltip-effect="dark"
                style="width: 100%"
                border
              >
                <el-table-column label="序号" type="index" align="center">
                  <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
                </el-table-column>
                <el-table-column prop="aeId" label="报名编号" align="center">
                </el-table-column>
                <el-table-column
                  prop="awName"
                  label="作品名称"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="nickname"
                  label="作者昵称"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="awTime"
                  label="上传时间"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="awState"
                  label="状态"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="reviewerName"
                  label="审核人"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="auditTime"
                  label="审核时间"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>

                <el-table-column
                  prop=""
                  label="操作"
                  align="center"
                  show-overflow-tooltip
                  width="120"
                >
                  <template slot-scope="scope">
                    <el-link type="primary" @click="bj(scope.row)"
                      >审核</el-link
                    >
                    <el-link type="primary" @click="ck(scope.row)"
                      >查看</el-link
                    >
                    <el-link type="primary">下架</el-link>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <Page
                :total="total"
                :pageNumber.sync="pageNumber"
                :pageSize.sync="pageSize"
                @current-change="changeCurrentPage"
                @size-change="handleSizeChange"
              >
              </Page>
            </div>
        </el-tab-pane>
        <el-tab-pane label="人气榜单" name="4">
          <div class="btn">
              <el-input v-model="search" @change="search" clearable size="small" prefix-icon="el-icon-search"
        placeholder="搜索广播名称">
      </el-input>  
       <div>
          <el-button type="primary">导出</el-button>
        <el-button type="primary">钻石奖励</el-button>
       </div>
       
          </div>
            <div>
               <div>
              <el-table
                ref="multipleTable"
                :data="tableData4"
                tooltip-effect="dark"
                style="width: 100%"
                border
              >
                <el-table-column label="序号" type="index" align="center">
                  <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
                </el-table-column>
                <el-table-column prop="aeId" label="报名编号" align="center">
                </el-table-column>
                <el-table-column
                  prop="awName"
                  label="作品名称"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="nickname"
                  label="作者昵称"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="vote"
                  label="投票数"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="diamonds"
                  label="钻石数"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="heat"
                  label="热度值"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="popularity"
                  label="钻石奖励"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="auditTime"
                  label="当前排名"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>

                <el-table-column
                  prop=""
                  label="操作"
                  align="center"
                  show-overflow-tooltip
                  width="120"
                >
                  <template slot-scope="scope">
                    <el-link type="primary" @click="bj(scope.row)"
                      >查看</el-link
                    >
                    <el-link type="primary" @click="bj(scope.row)"
                      >添加热度值</el-link
                    >
      
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <Page
                :total="total"
                :pageNumber.sync="pageNumber"
                :pageSize.sync="pageSize"
                @current-change="changeCurrentPage"
                @size-change="handleSizeChange"
              >
              </Page>
            </div>
            </div>


        </el-tab-pane>
        <!-- <el-tab-pane label="评委打分" name="5">

        </el-tab-pane> -->
        <el-tab-pane label="评委榜单" name="6">
          
           <div class="btn">
              <el-input v-model="search" @change="search" clearable size="small" prefix-icon="el-icon-search"
        placeholder="搜索广播名称">
      </el-input>  
       <div>
          <el-button type="primary">发布榜单</el-button>
        <el-button type="primary">钻石奖励</el-button>
        <el-button type="primary">导出</el-button>
       </div>
           </div>
          <div>
               <div>
              <el-table
                ref="multipleTable"
                :data="tableData6"
                tooltip-effect="dark"
                style="width: 100%"
                border
              >
                <el-table-column label="序号" type="index" align="center">
                  <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
                </el-table-column>
                <el-table-column prop="aeId" label="报名编号" align="center">
                </el-table-column>
                <el-table-column
                  prop="awName"
                  label="作品名称"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="nickname"
                  label="作者昵称"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="activityScoreList[0].score"
                  label="评委1"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="activityScoreList[1].score"
                  label="评委2"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="activityScoreList[2].score"
                  label="评委3"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="score"
                  label="平均分"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="judges"
                  label="钻石奖励"
                  show-overflow-tooltip
                  align="center"
                > </el-table-column>
                <el-table-column
                  prop="releaseState"
                  label="状态"
                  show-overflow-tooltip
                  align="center"
                >  
                  <template slot-scope="scope">
                    {{scope.row.releaseState=='1'?'已发布':'未发布'}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="auditTime"
                  label="排名"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>

              </el-table>
              <!-- 分页 -->
              <Page
                :total="total"
                :pageNumber.sync="pageNumber"
                :pageSize.sync="pageSize"
                @current-change="changeCurrentPage"
                @size-change="handleSizeChange"
              >
              </Page>
            </div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="评委列表" name="7">
          

           <div>
              <el-table
                ref="multipleTable"
                :data="tableData7"
                tooltip-effect="dark"
                style="width: 100%"
                border
              >
                <el-table-column label="序号" type="index" align="center">
                  <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
                </el-table-column>
                <el-table-column prop="aeId" label="评委名称" align="center">
                </el-table-column>
                <el-table-column
                  prop="awName"
                  label="评委账号"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="nickname"
                  label="密码"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                 <el-table-column
                  prop=""
                  label="操作"
                  align="center"
                  show-overflow-tooltip
                  width="120"
                >
                  <template slot-scope="scope">
                    <el-link type="primary" @click="bj(scope.row)"
                      >审核</el-link
                    >
                    <el-link type="primary" @click="ck(scope.row)"
                      >查看</el-link
                    >
                    <el-link type="primary">下架</el-link>
                  </template>
                </el-table-column>

              </el-table>
              <!-- 分页 -->
              <Page
                :total="total"
                :pageNumber.sync="pageNumber"
                :pageSize.sync="pageSize"
                @current-change="changeCurrentPage"
                @size-change="handleSizeChange"
              >
              </Page>
              </div>
        </el-tab-pane>
        <el-tab-pane label="奖励审核" name="8">
          
<div>
              <el-table
                ref="multipleTable"
                :data="tableData8"
                tooltip-effect="dark"
                style="width: 100%"
                border
              >
                <el-table-column label="序号" type="index" align="center">
                  <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
                </el-table-column>
                <el-table-column prop="aeId" label="报名编号" align="center">
                </el-table-column>
                <el-table-column
                  prop="awName"
                  label="作品名称"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="nickname"
                  label="作者昵称"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                 
                  label="类型"
                  show-overflow-tooltip
                  align="center"
                >
                   <template slot-scope="scope">
                        {{scope.row.arType=='1'? '评委榜单':'人气榜单'}}
                   </template>>
                </el-table-column>
                <el-table-column
                  prop="reward"
                  label="钻石奖励"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="auditTime"
                  label="审核时间"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="reviewerName"
                  label="审核人"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="arState"
                  label="状态"
                  show-overflow-tooltip
                  align="center"
                >
                <template slot-scope="scope">
                  {{scope.row.arState=='1'? '待审核':(scope.row.arState=='2'? '通过':'不通过')}}
                </template>
                </el-table-column>
                 <el-table-column
                  prop=""
                  label="操作"
                  align="center"
                  show-overflow-tooltip
                  width="120"
                >
                  <template slot-scope="scope">
                    <el-link type="primary" @click="bj(scope.row)"
                      >通过</el-link
                    >
                    <el-link type="primary" @click="ck(scope.row)"
                      >不通过</el-link
                    >
               
                  </template>
                </el-table-column>

              </el-table>
              <!-- 分页 -->
              <Page
                :total="total"
                :pageNumber.sync="pageNumber"
                :pageSize.sync="pageSize"
                @current-change="changeCurrentPage"
                @size-change="handleSizeChange"
              >
              </Page>
              </div>


        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { Switch } from 'element-ui';
import apis from "../../apis/modules/activityList";
import Page from "../../components/page.vue";
export default {
  components: {
    Page,
  },
  data() {
    return {
      search:"",
      statisticsMoney: {},
      activeName: "1",
      pageNumber: 1,
      pageSize: 10,
      total: null,
      atyId: this.$route.params.atyId,
      atyPrice: this.$route.params.atyPrice,
      list: {},
      tableData2: [], //报名信息
      options: [
        {
          value: "all",
          label: "全部",
        },
        {
          value: "1",
          label: "待审核",
        },
        {
          value: "2",
          label: "审核通过",
        },
        {
          value: "3",
          label: "审核不通过",
        },
      ],
      value: "all",
      tableData3:[],
      tableData4:[],
      tableData6:[],
      tableData7:[],
      tableData8:[],
    };
  },
  mounted() {
    // this.atyId=this.$route.params.atyId
    console.log(this.atyId, 77, this.atyType);
    this.activeDeail({ atyId: this.atyId });
    //报名信息
    this.getActivityEnroll({
      atyId: this.atyId,
      pageNumber: this.pageNumber,
      pageSize: this.pageSize,
    });
    //作品管理列表
    this.getActivityWorks({
       atyId: this.atyId,
       awState:this.value,
        pageNumber: this.pageNumber,
      pageSize: this.pageSize,
    })
    //人气
    this.getPopularityActivityWorks({
         atyId: this.atyId,
         pageNumber: this.pageNumber,
      pageSize: this.pageSize,
    })
    //评委榜单
this.getJudgesActivityWorks({
        atyId: this.atyId,
       content:" ",
         pageNumber: this.pageNumber,
      pageSize: this.pageSize,
    })
    //评委列表
this.getActivityJudges({
      atyId: this.atyId,
         pageNumber: this.pageNumber,
      pageSize: this.pageSize,
    })
    //奖励审核
this.getActivityReward({
       atyId: this.atyId,
       pageNumber: this.pageNumber,
      pageSize: this.pageSize,
    })


  },


  methods: {
    //分页
    //分页
    changeCurrentPage(val) {
      this.pageNumber = val;
      const list = {
        atyId: this.atyId,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
      };
      this.getActivityEnroll(list);
      console.log(val, 333);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      const list = {
        atyId: this.atyId,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
      };

      this.getActivityEnroll(list);
      console.log(val, 222);
    },
    //详情
    async activeDeail(data) {
  
      await apis.activeDeail(data).then((res) => {
        if (res.code == 200) {
          this.list = res.data;
          const list = this.list;
          console.log(list);

          switch (list.atyState) {
            case "1":
              list.atyState = "预热中";
              break;
            case "2":
              list.atyState = "报名中";
              break;
            case "3":
              list.atyState = "进行中";
              break;
            case "4":
              list.atyState = "已结束";
              break;

            default:
              break;
          }
          switch (list.atyType) {
            case "1":
              list.atyType = "线上活动";
              break;

            default:
              break;
          }
          switch (list.atyType) {
            case "1":
              list.atyType = "线上活动";
              break;
            case "2":
              list.atyType = "线下活动";
              break;

            default:
              break;
          }
          switch (list.priceType) {
            case "1":
              list.priceType = "付费";
              break;
            case "2":
              list.priceType = "免费";
              break;

            default:
              break;
          }
          switch (list.state) {
            case "1":
              list.state = "上架";
              break;
            case "2":
              list.state = "下架";
              break;

            default:
              break;
          }
          switch (list.whetherDeduction) {
            case "1":
              list.whetherDeduction = "是";
              break;
            case "2":
              list.whetherDeduction = "否";
              break;

            default:
              break;
          }
          switch (list.whetherGrade) {
            case "1":
              list.whetherGrade = "是";
              break;
            case "2":
              list.whetherGrade = "否";
              break;

            default:
              break;
          }
          switch (list.whetherInfo) {
            case "1":
              list.whetherInfo = "是";
              break;
            case "2":
              list.whetherInfo = "否";
              break;

            default:
              break;
          }
          switch (list.whetherLive) {
            case "1":
              list.whetherLive = "是";
              break;
            case "2":
              list.whetherLive = "否";
              break;

            default:
              break;
          }
          switch (list.whetherVote) {
            case "1":
              list.whetherVote = "是";
              break;
            case "2":
              list.whetherVote = "否";
              break;

            default:
              break;
          }
          switch (list.worksType) {
            case "1":
              list.worksType = "是";
              break;
            case "2":
              list.worksType = "否";
              break;

            default:
              break;
          }
        }
    
      });
    },
    //报名信息
    async getActivityEnroll(data) {
      await apis.getActivityEnroll(data).then((res) => {
        if (res.code == 200) {
          this.tableData2 = res.data.list;
          this.statisticsMoney = res.data.statisticsMoney;
        }
      });
    },
   //作品管理列表
    async getActivityWorks(data){
      await apis.getActivityWorks(data).then((res)=>{
        console.log(res,"zuoping");
      })
    },
    //人气榜单
    async getPopularityActivityWorks(data) {
      await apis.getPopularityActivityWorks(data).then((res) => {
        console.log(res,"人气榜单");
        if (res.code == 200) {
        
        }
      });
    },
    //评委榜单
    async getJudgesActivityWorks(data) {
      await apis.getJudgesActivityWorks(data).then((res) => {
        console.log(res,"评委榜单");
        if (res.code == 200) {
        
        }
      });
    },
    //评委列表
    async getActivityJudges(data) {
      await apis.getActivityJudges(data).then((res) => {
        console.log(res,"评委列表");
        if (res.code == 200) {
        
        }
      });
    },
    //奖励审核
    async getActivityReward(data) {
      console.log(data);
      await apis.getActivityReward(data).then((res) => {
        console.log(res,"奖励审核");
        if (res.code == 200) {
          
        }
      });
    },
    
    handleClick(tab, event) {
      console.log(tab.name);
        
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 20px;
  font-size: 14px;
}
.msg {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  font-size: 14px;
  div {
    width: 300px;
    height: 40px;
  }
}
.img {
  img {
    width: 300px;
    height: 300px;
    background-color: #ccc;
    margin-right: 20px;
  }
}
.h {
  font-size: 16px;
  margin: 20px 0;
}
p {
  font-size: 14px;
  color: #ccc;
}
.price {
  display: flex;
  margin-top: 40px;
  h3 {
    margin-left: 40px;
  }
}
.btn{
  display: flex;
  justify-content: space-between;
  .el-button{
    width: 120px;
  }
}
.el-input {
    width: 300px;
  }
</style>